<template>
	<view class="content">
		<view class="nav">
			<text :class="['item',ordertype==0?'checked':'']" @tap="changeType(0)">待接单</text>
			<text :class="['item',ordertype==7?'checked':'']" @tap="changeType(7)">已拒单</text>
			<!-- <text :class="['item',ordertype==2?'checked':'']" @tap="changeType(2)">已过期</text> -->
		</view>
		<!-- 抢单列表 -->
		<view v-for="(item,index) in list" :key="index">
			<view class="order">
				<text class="price">￥{{(item.freight*item.goods_num).toFixed(2)}}</text>
				<view class="time">
					<view class="icon iconfont icon-jishi1"></view>
					<text>用车</text>
					<text class="date">{{item.plan_beg_date.split(' ')[0]}}</text>
				</view>
				<view class="address">
					<view class="icon iconfont position icon-daohang" @tap="toMapAPP(item.beg_land)"></view>
					<view class="point"></view>
					<view class="city">{{item.beg_land}}</view>
					<view class="info">
						<!-- <text>{{item.beg_land}}</text> -->
						<text class="tel">{{item.supplier_phone}}</text>
						<view class="icon iconfont icon-dianhua" @tap="callphone(item.supplier_phone)"></view>
					</view>
				</view>
				<view class="address">
					<view class="icon iconfont position icon-daohang" @tap="toMapAPP(item.consignee_address)"></view>
					<view class="point" style="background-color:#ff0000 ;"></view>
					<view class="city">{{item.consignee_address}}</view>
					<view class="info">
						<!-- <text>许昌市禹州市党政综合办公大楼运营中心料场</text> -->
						<text class="tel">{{item.consignee_phone}}</text>
						<view class="icon iconfont icon-dianhua" @tap="callphone(item.consignee_phone)"></view>
					</view>
				</view>
				<view class="category">
					<view class="icon iconfont icon-beizhu"></view>
					<text>品类：{{item.goods_name}} | {{(item.goods_num*1).toFixed(4)}}{{item.goods_spec}}吨</text>
				</view>
				<text class="status">状态：
					<text v-if="item.signer_status==0">待接单</text>
					<text v-if="item.signer_status==1">已接单</text>
					<text v-if="item.signer_status==2">运输中</text>
					<text v-if="item.signer_status==3">已送达</text>
					<text v-if="item.signer_status>=4&&item.signer_status<7||item.signer_status==-1">已签收</text>
					<text v-if="item.signer_status==7">已拒单</text>
				</text>
				<view class="btnbox">
					<view class="btn"  v-if="item.signer_status==0"  @tap="dialogToggle(item.id)">拒单</view>
					<view class="btn" v-if="item.signer_status==0" @tap="dialogToggle2(item.id)">接单</view>
					<navigator :url="'./info?id='+item.id" class="btn" hover-class="none">查看详情</navigator>
				</view>
			</view>
		</view>
		<!-- 筛选弹窗 -->
		<view class="popup" @tap="close" v-if="showPopup">
			<view class="box" @tap.stop="!close">
				<view class="uni-input-wrapper ipt">
					<input placeholder-class="input-style" placeholder="请输入订单编号" v-model="search" />
					<uni-icons type="clear" size="24" color="#c0c4cc" v-if="search!=''"
						@click="search = ''"></uni-icons>
				</view>
				<!-- <uni-data-select v-model="type" :localdata="daterange"  placeholder="请选择"
					style="margin-bottom: 20rpx;"></uni-data-select> -->
				<view class="uni-list-cell-db ipt">
					<picker mode="date" :value="startDate" @change="bindDateChange">
						<view class="uni-input" v-if="startDate">{{startDate}}</view>
						<view class="input-style" v-else>请选择开始日期</view>
					</picker>
					<text style="color: #999;">——</text>
					<picker mode="date" :value="endDate" @change="bindEndChange">
						<view class="uni-input" v-if="endDate">{{endDate}}</view>
						<view class="input-style" v-else>请选择结束日期</view>
					</picker>
				</view>
				<view class="btnbox">
					<view class="btn" @tap="reset">重置</view>
					<view class="btn search" @tap="searchList">搜索</view>
				</view>
			</view>
		</view>
		<!-- 拒单弹窗 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="info" cancelText="关闭" confirmText="确认"  content="是否确认拒单？"
				@confirm="refuse"></uni-popup-dialog>
		</uni-popup>
		<!-- 接单弹窗 -->
		<uni-popup ref="alertDialog2" type="dialog">
			<uni-popup-dialog type="info" cancelText="关闭" confirmText="确认"  content="是否确认接单？"
				@confirm="receive"></uni-popup-dialog>
		</uni-popup>

		<!-- 开屏弹窗 -->
		<!-- <view class="popimg" v-if="showscreen">
			<image src="../../static/img/1111.jpg" mode="aspectFill" class="img"></image>
		</view> -->
	</view>
</template>

<script setup>
	import {
		getOrderList,
		receiveOrder,orderRefuse
	} from '../../network/index.js';
	import {
		onLoad,
		onShow,
		onNavigationBarButtonTap
	} from '@dcloudio/uni-app';
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';
	const showPopup = ref(false)
	const ordertype = ref(0)
	const search = ref('')
	const type = ref('')
	onNavigationBarButtonTap((e) => {
		showPopup.value = true
	})
	onLoad(() => {
		showscreen.value = true
		setTimeout(() => {
			showscreen.value = false
		}, 500)
	})
	onShow(() => {
		list.length = 0
		getList()
	})
	const showscreen = ref(false)
	const list = reactive([])
	const getList = () => {
		let data = {
			signer_status: ordertype.value,
			sn_code: search.value,
			start_time: startDate.value,
			end_time: endDate.value
		}
		getOrderList(data).then(res => {
			let arr  = res.data.data.sort( function(a, b) {
				return  new Date(b.creat_date) - new Date(a.creat_date)
			})
			Object.assign(list, arr)
		})
	}
	const callphone = (phone) => {
		uni.makePhoneCall({
			phoneNumber: phone
		})
	}
	const daterange = reactive([{
			value: 0,
			text: '接单有效截止日期'
		},
		{
			value: 1,
			text: '下单时间'
		},
		{
			value: 2,
			text: '计划发车时间'
		},
	])
	const close = () => {
		showPopup.value = false
	}
	const startDate = ref('')
	const bindDateChange = (e) => {
		startDate.value = e.detail.value
	}
	const endDate = ref('')
	const bindEndChange = (e) => {
		endDate.value = e.detail.value
	}
	const reset = () => {
		search.value = ''
		type.value = ''
		startDate.value = ''
		endDate.value = ''
		showPopup.value = false
		list.length = 0
		getList()
	}
	const searchList = () => {
		list.length = 0
		showPopup.value = false
		getList()
	}
	const changeType = (type) => {
		ordertype.value = type;
		list.length = 0
		getList()
	}
	const alertDialog = ref(null)
	const refuseId = ref('')
	const dialogToggle = (id) => {
		refuseId.value = id
		alertDialog.value.open()
	}
	const refuse = () => {
		let data = {
			id: refuseId.value
		}
		orderRefuse(data).then(res => {
			uni.showToast({
				title: '拒单成功'
			})
			list.length = 0
			getList()
		})
	}
	const alertDialog2 = ref(null)
	const dialogToggle2 = (id) => {
		currentid.value = id
		alertDialog2.value.open()
	}
	const currentid = ref('')
	const receive = () => {
		let data = {
			id: currentid.value
		}
		receiveOrder(data).then(res => {
			uni.showToast({
				title: '接单成功'
			})
			list.length = 0
			getList()
		})
	}
	const toMapAPP = (name) => {
		let latitude = ''
		let longitude = ''
		uni.getLocation({
			type: 'wgs84',
			success: function(res) {
				longitude = res.longitude
				latitude = res.latitude
			}
		})
		let url = "";
		if (plus.os.name == "Android") { //判断是安卓端
			plus.nativeUI.actionSheet({ //选择菜单
				title: "选择地图应用",
				cancel: "取消",
				buttons: [{
					title: "腾讯地图"
				}, {
					title: "百度地图"
				}, {
					title: "高德地图"
				}]
			}, function(e) {
				switch (e.index) {
					//下面是拼接url,不同系统以及不同地图都有不同的拼接字段
					case 1:
						//注意referer=xxx的xxx替换成你在腾讯地图开发平台申请的key
						url = `qqmap://map/geocoder?coord=${latitude},${longitude}&referer=3OOBZ-TFNRU-YZRVC-BFOMN-S7P73-ZJFIK`;
						break;
					case 2:
						url =
							`baidumap://map/marker?location=${latitude},${longitude}&title=${name}&coord_type=gcj02&src=andr.baidu.openAPIdemo`;
						break;
					case 3:
						url =
							`androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
						break;
					default:
						break;
				}
				if (url != "") {
					url = encodeURI(url);
					//plus.runtime.openURL(url,function(e){})调起手机APP应用
					plus.runtime.openURL(url, function(e) {
						plus.nativeUI.alert("本机未安装指定的地图应用");
					});
				}
			})
		} else {
			// iOS上获取本机是否安装了百度高德地图，需要在manifest里配置
			// 在manifest.json文件app-plus->distribute->apple->urlschemewhitelist节点下添加
			//（如urlschemewhitelist:["iosamap","baidumap"]）  
			plus.nativeUI.actionSheet({
				title: "选择地图应用",
				cancel: "取消",
				buttons: [{
					title: "腾讯地图"
				}, {
					title: "百度地图"
				}, {
					title: "高德地图"
				}]
			}, function(e) {
				switch (e.index) {
					case 1:
						url = `qqmap://map/geocoder?coord=${latitude},${longitude}&referer=3OOBZ-TFNRU-YZRVC-BFOMN-S7P73-ZJFIK`;
						break;
					case 2:
						url =
							`baidumap://map/marker?location=${latitude},${longitude}&title=${name}&content=${name}&src=ios.baidu.openAPIdemo&coord_type=gcj02`;
						break;
					case 3:
						url =
							`iosamap://viewMap?sourceApplication=applicationName&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
						break;
					default:
						break;
				}
				if (url != "") {
					url = encodeURI(url);
					plus.runtime.openURL(url, function(e) {
						plus.nativeUI.alert("本机未安装指定的地图应用");
					});
				}
			})
		}
	}
</script>

<style lang="scss">
	.nav {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 30rpx;
		margin-top: 2rpx;
		display: flex;
		justify-content: space-between;

		.item {
			background-color: #fff;
			display: inline-block;
			width: 50%;
			text-align: center;
		}

		.checked {
			background-color: #ffc400;
		}
	}

	.order {
		width: 100%;
		margin-top: 20rpx;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		background-color: #fff;
		position: relative;

		.price {
			color: #ff6700;
			font-size: 42rpx;
			font-weight: bolder;
			position: absolute;
			top: 10rpx;
			right: 20rpx;
		}

		.time {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			gap: 16rpx;

			.icon {
				color: #f6bf00;
				font-size: 40rpx;
			}

			.date {
				color: #ff6700;
				font-weight: 600;
			}
		}

		.address {
			padding-top: 10rpx;
			position: relative;

			.position {
				font-size: 60rpx;
				position: absolute;
				top: 10rpx;
				right: 0rpx;
			}

			.point {
				float: left;
				margin-top: 10rpx;
				margin-left: 10rpx;
				width: 20rpx;
				height: 20rpx;
				border-radius: 10rpx;
				background-color: #3cc51f;
			}

			.city {
				font-size: 36rpx;
				padding: 0 0 10rpx 50rpx;
				box-sizing: border-box;
			}

			.info {
				width: 70%;
				word-wrap: break-word;
				color: #666;
				padding-left: 40rpx;
				box-sizing: border-box;
				font-size: 28rpx;
				line-height: 44rpx;

				.tel {
					color: #ff6700;
					font-weight: 600;
					margin-left: 10rpx;
				}

				.icon {
					display: inline-block;
					color: #ff6700;
					font-size: 40rpx;
					padding: 0rpx 20rpx;
				}
			}
		}

		.category {
			padding: 10rpx 0 0 0rpx;
			box-sizing: border-box;
			color: #666;
			display: flex;
			justify-content: flex-start;
			gap: 20rpx;
			align-items: center;
			font-size: 24rpx;
			margin-top: 20rpx;
		}

		.status {
			position: absolute;
			bottom: 90rpx;
			right: 30rpx;
			font-size: 24rpx;
			color: #666;
		}

		.btnbox {
			width: 100%;
			margin-top: 20rpx;
			display: flex;
			justify-content: flex-end;
			padding: 0 30rpx;
			box-sizing: border-box;
			gap: 30rpx;

			.btn {
				width: 160rpx;
				line-height: 50rpx;
				text-align: center;
				background-color: #ffc400;
				border-radius: 10rpx;
				gap: 0rpx;
				font-size: 24rpx;
			}
		}
	}

	.popup {
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0;
		z-index: 999;
		transition: all .5s;

		.box {
			width: 100%;
			height: 360rpx;
			background-color: #fff;
			padding: 50rpx 30rpx;
			box-sizing: border-box;
			gap: 10rpx;
			padding-bottom: 20rpx;

			.ipt {
				height: 70rpx;
				border: 2rpx solid #e5e5e5;
				border-radius: 10rpx;
				margin-bottom: 20rpx;
				padding: 0 20rpx;
				box-sizing: border-box;
				font-size: 28rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;

				input {
					width: 700rpx;
				}
			}

			.btnbox {
				width: 100%;
				margin-top: 30rpx;
				display: flex;
				justify-content: space-around;

				.btn {
					width: 180rpx;
					height: 60rpx;
					background-color: #f8f8f8;
					line-height: 60rpx;
					text-align: center;
					border-radius: 12rpx;
					font-size: 28rpx;
				}

				.search {
					background-color: #ffc400;
				}
			}
		}
	}

	.popimg {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		z-index: 999;

		.img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
</style>